<script setup lang="ts">
import {
  type AccountInfoSchema,
  type LogSchema,
  type RiskReportSchema
} from "@/types/account.types";
import { computed, ref } from "vue";
import Position from "@/components/tables/account/Position.vue";
import PositionAnalysis from "@/components/tables/account/PositionAnalysis.vue";
import Order from "@/components/tables/account/Order.vue";
import Trade from "@/components/tables/account/Trade.vue";
import {
  useTradeLogsTable,
  useRiskReportsTable
} from "@/views/trade/TradeTabs";

defineOptions({
  name: "expand-tabs"
});
const props = defineProps<{
  row: AccountInfoSchema;
}>();

const position = computed(() => Array.from(props.row.positions.values()));
const orders = computed(() => Array.from(props.row.orders.values()));
const trades = computed(() => Array.from(props.row.trades.values()));
const logs = computed<LogSchema[]>(() => (props.row.logs ?? []).slice(-20));
const riskReports = computed<RiskReportSchema[]>(() =>
  Array.from(props.row.risk_reports.values())
);

const activeTab = ref("positions");
const tradeLogsTable = useTradeLogsTable();
const logTableSize = tradeLogsTable.tableSize;
const logColumns = tradeLogsTable.logColumns;
const getRowClassName = tradeLogsTable.getRowClassName;

const riskReportsTable = useRiskReportsTable();
const riskReportsTableSize = riskReportsTable.tableSize;
const riskReportColumns = riskReportsTable.riskReportColumns;
</script>

<template>
  <div class="w-full px-2 py-1 sm:px-4">
    <div
      name="header"
      class="flex-bc mb-1 text-[11px] text-gray-400 sm:text-xs"
    >
      <div>账户ID：{{ row.account_id }}</div>
      <div>更新时间：{{ row.last_update_time }}</div>
    </div>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="持仓" name="positions" lazy>
        <Position :positions="position" />
      </el-tab-pane>
      <el-tab-pane label="持仓分析" name="position_analysis" lazy>
        <PositionAnalysis :position="position" />
      </el-tab-pane>
      <el-tab-pane label="委托" name="orders" lazy>
        <Order :orders="orders" />
      </el-tab-pane>
      <el-tab-pane label="成交" name="trades" lazy>
        <Trade :trades="trades" />
      </el-tab-pane>
      <el-tab-pane label="风控" name="risk_reports" lazy>
        <pure-table
          :data="riskReports"
          :columns="riskReportColumns"
          :row-key="row => row.name"
          :size="riskReportsTableSize"
        />
      </el-tab-pane>
      <el-tab-pane label="日志" name="logs" lazy>
        <pure-table
          :data="logs"
          :columns="logColumns"
          :row-key="row => `${row.time}-${row.source}-${row.level}`"
          :row-class-name="({ row }) => getRowClassName(row)"
          :size="logTableSize"
          :default-sort="{ prop: 'time', order: 'descending' }"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-tabs__item.is-top) {
  @media screen and (width <= 640px) {
    font-size: 12px;
  }
}
</style>
